<template>
  <div class="labeled-quantity-content">
    <span class="message-title">{{messageTitle}}</span>
    <span class="message-msg">
      <i v-for="(item, index) in showNumber" :key="index">{{item}}</i>
    </span>
  </div>
</template>
<script>
export default {
  name: 'tips',
  props: {
    messageTitle: {
      type: String,
      require: true,
      default: ''
    },
    messageMsg: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
    }
  },
  computed: {
    showNumber () {
      return this.messageMsg.toString().split('')
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
  .labeled-quantity-content {
    display: inline-block;
    text-align: left;
    .message-title {
      color: #A0B1D7;
      font-size: 14px;
      line-height: 31px;
      display: inline-block;
    }
    .message-msg {
      display: inline-block;
      vertical-align: top;
      font-size: 18px;
      color: #fff;
      margin-left: 10px;
      i {
        display: block;
        float: left;
        text-align: center;
        width: 23px;
        height: 31px;
        line-height: 31px;
        margin-right: 5.8px;
        font-size: 18px;
        background: url("./../../assets/images/module/pic_number_bg.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
  @media screen and (min-width: 1890px) {
    .labeled-quantity-content {
      .message-title {
        font-size: 16px;
        line-height: 37px;
      }
      .message-msg {
        font-size: 22px;
        i {
          width: 28px;
          height: 37px;
          line-height: 37px;
        }
      }
    }
  }
</style>
